<template>
    <section class="movieContent-main" v-loading="loading"   element-loading-background="rgba(255, 255, 255, 0.8)">
        <div class="movieAll-1">
<!--          <div class="classroom-main">
              <el-breadcrumb separator-class="el-icon-arrow-right" >
                <el-breadcrumb-item class="hander" to="/index">首页</el-breadcrumb-item>
                <el-breadcrumb-item class="hander" :to="path">{{menuName}}</el-breadcrumb-item>
                <el-breadcrumb-item>课程详情</el-breadcrumb-item>
              </el-breadcrumb>
          </div> -->

          <div class="back" @click="goPage(item,'/course_center')">
            <img src="@/assets/image/md-arrow_back.svg" />
          </div>
          <div class="courser-top">

            <img :src="$axios.defaults.baseURL+content.photo" alt="" class="course-main">
            <div class="course-right">
              <h3 class="title">{{content.courseName}}</h3>
              <!-- <img src="@/assets/images/vip-icon.png" alt="" class="vip-icon"> -->
              <div class="ping">
                <span class="title1">评价：</span>
                <el-rate v-model="content.score" disabled show-score text-color="#ff9900" score-template="{value}" class="rate-main"></el-rate>
                <span class="teacher1">({{content.buyCount}}人学习)</span>
              </div>
              <p class="price" v-show="Number(content.presentPrice)!=0">￥{{content.presentPrice}} <span class="old-price" >￥{{content.originalPrice}}</span> <span class="keshi" >{{countObj.detailsCount}}课时</span></p>
              <p class="price" v-show="Number(content.presentPrice)==0">免费  <span class="keshi" v-show="content.courseType=='1'">{{countObj.detailsCount}}课时</span><span class="keshi" v-show="content.courseType=='3'">开课时间</span></p>
              <!-- <p class="price" v-if="content.courseVipType=='1'">会员课程 </p>
              <p class="price" v-if="content.courseVipType=='3'">免费课程 </p> -->
              <!-- <p class="price" v-if="content.courseVipType!='2'"></p> -->
              <!-- <el-button type="primary"  class="sou iconfont iconxin"  @click="collect" v-show="!content.collection"></el-button>
              <el-button type="primary"  class="sou" v-show="content.collection" @click="collect">取消收藏</el-button> -->
              <p class="content">{{content.introduction}}</p>

              <div class="mai" v-show="!content.buyFlag && !content.isTree" @click="buyCourse">购买课程</div>
              <div class="mai" @click="see" v-show="(content.buyFlag || content.isTree) && (content.courseType=='1' || content.courseType=='3')">立即观看</div>
              <div class="mai" @click="activeName='second'" v-show="content.buyFlag  && content.courseType=='4'">已报名</div>
              <div class="mai" @click="activeName='second'" v-show="!content.buyFlag   && content.courseType=='4'">立即报名</div>
              <div class="see" @click="see" v-show="!content.buyFlag && !content.isTree && content.auditionFlag=='1'">立即试看</div>
              <div class="text" v-show="content.courseType=='4' &&(!content.buyFlag  && !content.isTree)">(面授课程)</div>
              <div class="text" v-show="content.courseType=='4' &&(content.buyFlag  || content.isTree)">(面授课程 {{content.validityStartDate}} - {{content.validityEndDate}})</div>
              <div class="text" v-show="content.courseType=='1'">(点播课程)</div>
              <div class="xin">
                <!-- <span class="number iconfont iconzan" v-show="!content.zan" @click="setZan"></span>
                <span class="number iconfont iconzan iconzan1 " v-show="content.zan" @click="setZan"></span> -->
                <i class="iconfont iconxin" v-show="!content.collection" @click="collect"></i>
                <i class="iconfont iconxin iconxin1" v-show="content.collection" @click="collect"></i>
              </div>
            </div>
          </div>
          <div class="course-content1">
            <div class="content-left" v-show="content.courseType!='3'">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="课程概览" name="first" style="background:#ffffff;width:100%;float:left;">
                  <div class="course-text" v-html="content.description">

                  </div>
                  <nodata v-show="content.description=='' && start"></nodata>
                </el-tab-pane>
                <el-tab-pane :label="label" name="second" >
                  <div class="pre-box" v-show="content.courseType=='1' && login">
                    <div class="pre-main">
                          <div class="pre-top">
                              <el-progress :text-inside="true" :stroke-width="20" :percentage="countObj.jindu" class="pre-jin"></el-progress>
                              <div class="study" @click="goStudy">{{text}}</div>
                          </div>
                          <div class="pre-bottom">
                              <p class="text">目前已完成：<span style="font-size:18px;color:#444444;">{{countObj.studyCount}} </span>课时,加油啊！</p>
                              <span class="next" >下一课时：{{nextTitle}}</span>
                          </div>
                      </div>
                  </div>

                  <div class="catalog" v-show="content.courseType=='1'">
                    <h3 class="mu-title">目录</h3>
                    <div class="course-item" >
                        <div class="top">
                            <span class="text">课程</span>
                            <span class="index">1</span>
                            <span class="name">{{content.title}}</span>
                        </div>
                        <div class="line-main">
                            <el-timeline :reverse="reverse">
                                <el-timeline-item v-for="(item1, index1) in muluList1" :key="index1">
                                    <span class="name" v-show="item1.detailType=='1'">课时</span>
                                    <span class="name" v-show="item1.detailType=='2'">考试</span>
                                    <span class="main-name" v-show="item1.detailType=='1'">{{item1.title}}</span>
                                    <span class="main-name" v-show="item1.detailType=='2'">{{item1.testTitle}}</span>
                                    <div class="right" v-show="content.show && item1.detailType=='1'">
                                      <span class="name1">学习进度：</span>
                                      <el-progress :percentage="item1.study"></el-progress>
                                    </div>
                                    <div class="right-box">
                                        <span class="time iconfont iconbofang" v-show="item1.detailType=='1'">{{item1.timeTesx}}</span>
                                        <div class="bofang" style="background:#ff6c62;" v-show="!content.buyFlag && !content.isTree && content.auditionFlag=='1' && item1.detailType=='1'" @click="goSee(item1)">立即试看</div>
                                        <div class="bofang" style="background:#ff6c62;" v-show="(content.buyFlag || content.isTree) && item1.detailType=='1'" @click="goSee(item1)" :class="{'noClick':!item1.studyFlag}">立即观看</div>

                                        <div class="bofang" style="background:#ff6c62;" v-show="item1.detailType=='2'" @click="goTest(item1)" :class="{'noClick':!item1.studyFlag}">开始测试</div>

                                        <div class="bofang" style="background:#ff6c62;" v-show="!content.buyFlag && !content.isTree && content.auditionFlag=='0' && item1.detailType=='1'" @click="buyCourse">请购买</div>
                                    </div>
                                </el-timeline-item>
                              </el-timeline>
                              <nodata v-show="muluList1.length==0 && start"></nodata>
                              <div class="test-item" v-for="(item,index) in 0">
                                  <span class="text">结业考试</span>
                                  <span class="iconfont iconjihua1"></span>
                                  <span class="name1">{{item.title}}</span>
                                  <span class="start" @click="goPage('/paper/'+item.id)" :class="{'noTest':!isTest}">开始考试</span>
                              </div>
                        </div>
                    </div>



                </div>
                  <div class="sign" v-show="content.courseType=='4'">
                      <div class="baoming-content">
                        <h3 class="title">报名课程：{{content.title}}</h3>
                        <div class="baoming-input">
                          <span class="name2">姓名：</span>
                          <el-input v-model="input2"  class="text-input"></el-input>
                        </div>
                        <div class="baoming-input">
                          <span class="name2">性别：</span>
                          <el-select v-model="value" placeholder="请选择" class="sex-select">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                          </el-select>
                        </div>
                        <div class="baoming-input">
                          <span class="name2">手机号：</span>
                          <el-input v-model="input3"  class="text-input"></el-input>
                        </div>
                        <!-- <div class="baoming-input">
                          <span class="name2">身份证：</span>
                          <el-input v-model="input5"  class="text-input"></el-input>
                        </div> -->
                        <div class="baoming-button" @click="sign" v-show="!content.buyFlag">
                          立即报名
                        </div>
                        <div class="baoming-button"  v-show="content.buyFlag">
                          已报名
                        </div>

                      </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="学员问答" name="third">
                  <div class="taolun">
                    <div class="text-main">
                      <el-input type="textarea" :rows="2" placeholder="说出你的观点吧" v-model="textarea" class="top-textarea"></el-input>
                      <div class="button" @click="comment">提问</div>
                      <div class="submit-button" @click="comment">立即询问</div>
                      <div style="clear:both"></div>
                    </div>
                    <div class="taolun-content">
                      <div class="taolun-item" v-for="(item,index) in taoList">
                        <img :src="$axios.defaults.baseURL+item.userPhoto" alt="" class="man-img" />
                        <span class="name">{{item.userName}}</span>
                        <p class="content">{{item.content}}</p>
                        <div class="taolun-bottom">
                          <span class="time">{{item.createDate}}</span>
                          <div class="huifu">
                            <span class="text" @click="huifu(index,'1',item)">回复</span>
                            <!-- <img src="@/assets/images/huifu.png" alt="" @click="huifu(index,'1',item)"> -->
                          </div>
                        </div>
                        <div class="huifuList" v-show="item.childList.length!=0">
                          <div class="huifu-item" v-for="(item1,index1) in item.childList" :class="item1.addClass">
                            <!-- <p class="content1" v-show="item1.businessName!=''">{{item1.userName}} 回复 {{item1.businessName}}：<span style="color:#222222">{{item1.content}}</span></p> -->
                            <p class="content1" v-show="item1.businessName!=''">{{item1.userName}}：<span style="color:#222222">{{item1.content}}</span></p>
                            <p class="content1" v-show="item1.businessName==''">{{item1.userName}}：<span style="color:#222222">{{item1.content}}</span></p>
                            <div class="huifu-bottom">
                              <span class="time1">{{item.createDate}}</span>
                              <div class="huifu">
                                <!-- <span class="text" @click="huifu(index,'2',item1)">回复</span> -->
                                <!-- <img src="@/assets/images/huifu.png" alt="" @click="huifu(index,'2',item1)"> -->
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="text-main1" v-show="item.show">
                          <el-input type="textarea" :rows="10"  v-model="textarea1" :placeholder="message"></el-input>
                          <span class="hui" @click="comment(items,index,'1')">回复</span>
                        </div>
                        <div style="clear:both"></div>
                      </div>
                    </div>
                    <ui-pagination class="study-pagination" style="margin: 60px 0;" :total="total" @pageChange="pageChange" :size="pageSize" v-show="taoList!=0"></ui-pagination>
                    <nodata v-show="taoList.length==0 && start"></nodata>
                  </div>

                </el-tab-pane>
                <el-tab-pane label="学员评价" name="fourth">
                  <div class="ping-main">
                    <div class="ping">
                      <span class="title1">课程评分：</span>
                      <el-rate v-model="number1"  show-score text-color="#ff9900" score-template="{value}" class="rate-main"></el-rate>
                    </div>
                    <div class="text-main">
                      <el-input type="textarea" :rows="2" placeholder="说出你的观点吧" v-model="textarea2" class="top-textarea"></el-input>
                      <div class="button" @click="submit">提交</div>
                    </div>
                    <div class="pingList">
                      <div class="pingList-item" v-for="(item,index) in allPing" :class="item.addClass">
                        <img :src="$axios.defaults.baseURL+item.userPhoto" alt="">
                        <div class="ping-right">
                          <span class="man">{{item.userName}}</span>
                          <span class="time">{{item.createDate}}</span>
                          <p class="content">{{item.content}}</p>
                        </div>
                      </div>
                    </div>
                    <ui-pagination class="study-pagination" style="margin: 60px 0;" :total="total1" @pageChange="pageChange1" :size="10" v-show="allPing.length!=0"></ui-pagination>
                    <nodata v-show="allPing.length==0 && start"></nodata>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="课程资料" name="five">
                  <div class="mulumain">
                    <div class="mulu-item " style="height:60px;"v-for="(item,index) in muluList3">
                      <span class="text2">课程资料</span>
                      <span class="name2">{{item.title}}</span>
                      <div class="bofang" style="top:15px;" ><a :href="item.fileUrl"  download target="_blank">下载资料</a></div>
                    </div>
                    <nodata v-show="muluList3.length==0 && start" style="background:#ffffff"></nodata>
                  </div>
                </el-tab-pane>

              </el-tabs>
            </div>

            <div class="content-left" v-show="content.courseType=='3'">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="课程概览" name="first" style="background:#ffffff;width:100%;float:left;">
                  <div class="course-text" v-html="content.description">

                  </div>
                  <nodata v-show="content.description=='' && start"></nodata>
                </el-tab-pane>

                <el-tab-pane label="学员问答" name="third">
                  <div class="taolun">
                    <div class="text-main">
                      <el-input type="textarea" :rows="2" placeholder="说出你的观点吧" v-model="textarea" class="top-textarea"></el-input>
                      <div class="button" @click="comment">提问</div>
                      <div class="submit-button" @click="comment">立即询问</div>
                      <div style="clear:both"></div>
                    </div>
                    <div class="taolun-content">
                      <div class="taolun-item" v-for="(item,index) in taoList">
                        <img :src="$axios.defaults.baseURL+item.userPhoto" alt="" class="man-img" />
                        <span class="name">{{item.userName}}</span>
                        <p class="content">{{item.content}}</p>
                        <div class="taolun-bottom">
                          <span class="time">{{item.createDate}}</span>
                          <div class="huifu">
                            <span class="text" @click="huifu(index,'1',item)">回复</span>
                            <!-- <img src="@/assets/images/huifu.png" alt="" @click="huifu(index,'1',item)"> -->
                          </div>
                        </div>
                        <div class="huifuList" v-show="item.childList.length!=0">
                          <div class="huifu-item" v-for="(item1,index1) in item.childList" :class="item1.addClass">
                            <!-- <p class="content1" v-show="item1.businessName!=''">{{item1.userName}} 回复 {{item1.businessName}}：<span style="color:#222222">{{item1.content}}</span></p> -->
                            <p class="content1" v-show="item1.businessName!=''">{{item1.userName}}：<span style="color:#222222">{{item1.content}}</span></p>
                            <p class="content1" v-show="item1.businessName==''">{{item1.userName}}：<span style="color:#222222">{{item1.content}}</span></p>
                            <div class="huifu-bottom">
                              <span class="time1">{{item.createDate}}</span>
                              <div class="huifu">
                                <!-- <span class="text" @click="huifu(index,'2',item1)">回复</span> -->
                                <!-- <img src="@/assets/images/huifu.png" alt="" @click="huifu(index,'2',item1)"> -->
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="text-main1" v-show="item.show">
                          <el-input type="textarea" :rows="10"  v-model="textarea1" :placeholder="message"></el-input>
                          <span class="hui" @click="comment(items,index,'1')">回复</span>
                        </div>
                        <div style="clear:both"></div>
                      </div>
                    </div>
                    <ui-pagination class="study-pagination" style="margin: 60px 0;" :total="total" @pageChange="pageChange" :size="pageSize" v-show="taoList!=0"></ui-pagination>
                    <nodata v-show="taoList.length==0 && start"></nodata>
                  </div>

                </el-tab-pane>
                <el-tab-pane label="学员评价" name="fourth">
                  <div class="ping-main">
                    <div class="ping">
                      <span class="title1">课程评分：</span>
                      <el-rate v-model="number1"  show-score text-color="#ff9900" score-template="{value}" class="rate-main"></el-rate>
                    </div>
                    <div class="text-main">
                      <el-input type="textarea" :rows="2" placeholder="说出你的观点吧" v-model="textarea2" class="top-textarea"></el-input>
                      <div class="button" @click="submit">提交</div>
                    </div>
                    <div class="pingList">
                      <div class="pingList-item" v-for="(item,index) in allPing" :class="item.addClass">
                        <img :src="$axios.defaults.baseURL+item.userPhoto" alt="">
                        <div class="ping-right">
                          <span class="man">{{item.userName}}</span>
                          <span class="time">{{item.createDate}}</span>
                          <p class="content">{{item.content}}</p>
                        </div>
                      </div>
                    </div>
                    <ui-pagination class="study-pagination" style="margin: 60px 0;" :total="total1" @pageChange="pageChange1" :size="10" v-show="allPing.length!=0"></ui-pagination>
                    <nodata v-show="allPing.length==0 && start"></nodata>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="课程资料" name="five">
                  <div class="mulumain">
                    <div class="mulu-item " style="height:60px;"v-for="(item,index) in muluList3">
                      <span class="text2">课程资料</span>
                      <span class="name2">{{item.title}}</span>
                      <div class="bofang" style="top:15px;" ><a :href="item.fileUrl"  download target="_blank">下载资料</a></div>
                    </div>
                    <nodata v-show="muluList3.length==0 && start" style="background:#ffffff"></nodata>
                  </div>
                </el-tab-pane>

              </el-tabs>
            </div>


<!--            <div class="content-right">
              <h3 class="title">热门课程</h3>
              <div class="hot-all">
                <div class="hot-item" v-for="(item,idnex) in courseList" @click="goContent(item)">
                  <img :src="item.photo" alt="">
                  <span class="name">{{item.title}}</span>
                  <span class="price" v-show="Number(item.presentPrice)!=0">￥{{item.presentPrice}}</span>
                  <span class="price" v-show="Number(item.presentPrice)==0">免费</span>
                </div>
              </div>
            </div> -->

          </div>
          <div style="clear:both"></div>
        </div>
    </section>
</template>

<script>

import Pagination from '@/components/pagination.vue'
import Cookies from 'js-cookie'
import { Notification,Message} from 'element-ui';
import nodata from '@/components/nodata.vue'


export default {
  components: {
    'ui-pagination':Pagination,
    nodata
  },
  props:{
  },
  data(){
    return{
      loading:false,
      isColl:false,
      isBuy:false,
      buttonTitle:'',
      menuName:'',
      path:'',
      start:false,
      html:"",
      data:4.5,
      reverse:false,
      options: [{
          value: '1',
          label: '男'
        }, {
          value: '2',
          label: '女'
      }],
      value:'',
      input2:'',
      input3:'',
      input4:'',
      input5:'',
      newsList:[
      ],
      total:0,
      total1:0,
      activeName:'first',
      textarea2:'',
      textarea:'',
      textarea1:'',
      id:"",
      message:"",
      isTree:false,
      taoList:[
        {
          userName:'刘老师',
          content:'当micro：bit遇上Li：bit时激光切割：激光束照射被切割材料，使材料汽化形成孔洞，留下的就是我们需要的图案--突来的创意须被即时的创造。',
          time:'2019-08-08 12:15:36',
          show:false,
          childList:[
            {name1:'刘老师',name2:'马老师',content:'激光束照射被切割材料，使材料汽化形成孔洞，留下的就是我们需要的图案.',time:'2019-08-08 12:15:36'},
            {name1:'刘老师',name2:'马老师',content:'激光束照射被切割材料，使材料汽化形成孔洞，留下的就是我们需要的图案.激光束照射被切割材料，使材料汽化形成孔洞，留下的就是我们需要的图案',time:'2019-08-08 12:15:36'},
            {name1:'刘老师',name2:'马老师',content:'激光束照射被切割材料，使材料汽化形成孔洞，留下的就是我们需要的图案.',time:'2019-08-08 12:15:36',addClass:'no-border'},
          ],
        },
      ],
      muluList1:[

      ],
      muluList2:[
      ],
      muluList3:[
      ],
      number:4,
      content:{
        educationTeacher:{},
      },
      activeIndex1:'0',
      activeIndex2:'0',
      items:{},
      activeIndex3:'0',
      saiList:[
        {name:'更新时间'},
        {name:'浏览量'},
        {name:'学习人数'},
      ],
      label:'',
      pageSize:6,
      testList:[],
      courseList:[

      ],
      number1:5,
      allPing:[],
      pageNo:1,
      pageNo1:1,
      vip:false,
      login:false,
      videoList:[],
      countObj:{
        detailsCount:1,
        studyCount:0
      },
      nextTitle:'没有了',
      text:'开始学习'
    }
  },
  // head() {
  //   return {
  //     title: '课程详情',
  //     meta: [
  //       {
  //         hid: 'description',
  //         name: 'description',
  //         ccontent: '网校，黄山网校，在线学习，在线教育'
  //       },
  //       {
  //         hid: 'keywords',
  //         name: 'keywords',
  //         content: '网校，黄山网校，在线学习，在线教育'
  //       },
  //     ]
  //   }
  // },
  watch:{
    '$route.params'(newval, oldval) {
      this.getData();
    }
  },
  computed:{

  },
  mounted(){
    $('.el-scrollbar__wrap').animate({scrollTop: '0px'}, 0);

  },
  created(){

    this.getData();
    if(Cookies.get("token")){
      this.login = true;
    }
    //this.getCom();

    // this.getRecom();

    // this.addCenter();
  },
  methods:{
    goPage(url){
      this.$router.push(url);
    },
    goTest(item){
      this.$router.push('/paper/'+item.testObj.id);
    },
    sign(){
      if(!Cookies.get('token')){
        Notification.warning({
          title:'提示',
          message:"请先登录"
        })
        return;
      }
      if(this.input2=="" || this.input3==""  || this.value==""){
        Notification.warning({
          title:'提示',
          message:"请输入完整的信息"
        })
        return;
      }
      else{
        if(this.input3!=""){
          if (!(/^1[3456789]\d{9}$/.test(this.input3))) {
            Notification.warning({
              title:'提示',
              message:"请输入正确的手机号"
            })
            return;
          }
        }
        if(Number(this.content.presentPrice)==0){
          var that = this;
          this.$axios.$post("/f/addFreeOrder?buyId="+this.$route.params.id+"&buyType="+this.content.courseType+"&msCard="+this.input5+"&msMobile="+this.input3+"&msName="+this.input2+"&msSex="+this.value)
          .then(function (response) {
            Notification.success({
              title:'提示',
              message:"已成功报名"
            })
            that.getData();
            that.input5 = "";
            that.input2 = "";
            that.input3 = "";
            that.value = "";
          })
          .catch(function (error) {
            // handle error
            console.log(error);
          })
        }
        else{
          Cookies.set("m-name",this.input2);
          Cookies.set("m-sex",this.value);
          Cookies.set("m-mobile",this.input3);
          Cookies.set("m-no",this.input5);
          this.$router.push("/order/"+this.$route.params.id)
        }

      }
    },
    goStudy(){
      if(!this.content.buyFlag && !this.content.isTree){
        this.buyCourse();
        return;
      }
      if(this.countObj.studyCount==0){
        this.$router.push('/play/'+this.$route.params.id+"/0")
        // var routeData = this.$router.resolve({ path: "/play/"+this.$route.params.id+"/0"});
        // window.open(routeData.href, '_blank');
      }
      else{
        let a = this.countObj.studyCount-1;
        this.goSee(this.videoList[a]);
      }
    },
    see(){
      if(!Cookies.get("token")){
        this.$router.push("/login");
        return;
      }
      if(this.content.courseType=='3'){
        var routeData = this.$router.resolve({ path: "/live/"+this.content.channelNo});
        window.open(routeData.href, '_blank');
        return;
      }
      this.$router.push('/play/'+this.$route.params.id+"/0")
      // if(this.content.buyFlag){
      //   Cookies.set("seeType","yes");
      // }
      // else if(!this.content.buyFlag && this.content.auditionFlag=="1"){
      //   Cookies.set("seeType","no");
      //   Cookies.set("time",this.content.auditionTimes);
      // }
      // var routeData = this.$router.resolve({ path: "/play"});
      // window.open(routeData.href, '_blank');
    },
    buyCourse(){
      // if(!Cookies.get("token")){
      //   this.$router.push("/login/student");
      //   return;
      // }
      // if((this.content.courseVipType=="2" || this.content.courseVipType=="1") && !this.vip){
      //   this.$confirm('您还未开通会员，请先开通会员?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   }).then(() => {
      //     this.$router.push("/main/vip");

      //   }).catch(() => {

      //   });
      //   return;
      // }
      // Cookies.set("courseType",this.content.courseType);
      this.$router.push("/order/"+this.$route.params.id);
    },
    goSee(item){
      if(!Cookies.get("token")){
        this.$router.push("/login");
        return;
      }
      if(this.content.buyFlag){
        Cookies.set("seeType","yes");
      }
      // else if(!this.content.buyFlag && this.content.auditionFlag=="1"){
      //   Cookies.set("seeType","no");
      //   Cookies.set("time",this.content.auditionTimes);
      // }
      // else if(!this.content.buyFlag && this.content.auditionFlag=="0"){
      //     Message.warning({
      //       title:'提示',
      //       message:"请先报名购买课程"
      //     });
      //     return;
      // }
      if(item.detailType=='1'){
        this.$router.push('/play/'+this.$route.params.id+"/"+item.id)
      }
      else{
        this.$router.push('/paper/'+item.testObj.id)

      }

      // var routeData = this.$router.resolve({ path: '/play/'+this.$route.params.id+"/"+item.id});
      // window.open(routeData.href, '_blank');
    },
    pay(){
      if(!Cookies.get("type")){
        this.$router.push("/mainAll/login");
        return;
      }
      if(this.content.auditionFlag=="1"){
        Cookies.set("seeType","no");
        var routeData = this.$router.resolve({ path: "/see/"+this.$route.params.id+"/0"});
        window.open(routeData.href, '_blank');
        return;
      }
      var that = this;
      this.$axios.$post("http://seed.ckwashington.com/admin/mini/order/addCourseOrder?courseId="+this.$route.params.id+"&type=1&number=1")
      .then(function (response) {
        that.$router.push("/mainAll/courseOrder/"+response.data.id)
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    pageChange1(index){
        this.pageNo1 = index;
        this.getList();
    },
    getList(){
      var that = this;
      this.$axios.$get("/f/pagePingFen?rootCourseId="+this.$route.params.id+"&courseType="+this.content.courseType+"&pageNo="+this.pageNo1+"&pageSize=10")
      .then(function (response) {
        var data = response.data;
        var len = data.length;
        if(len!=0){
          that.total1 = response.count;
          // for(var i=0;i<len;i++){
          //   data[i].photo = "http://seed.ckwashington.com/admin" + data[i].photo;
          // }
          data[len-1].addClass = "no-border";
          that.allPing = data;
        }

      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    submit(){
      if(!Cookies.get("token")){
        this.$router.push("/login");
        return;
      }
      if(this.textarea2==""){
        Notification.warning({
          title:'提示',
          message:"请输入内容"
        })
        return;
      }
      var that = this;
      this.$axios.$post("/f/addPingFen?rootCourseId="+this.$route.params.id+"&score="+this.number1+"&content="+this.textarea2+"&courseType="+this.content.courseType+"&courseId="+this.content.id)
      .then(function (response) {
        Notification.success({
          title:'提示',
          message:"已提交"
        });
        that.getList();
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    setZan(){
      if(!Cookies.get("token")){
        this.$router.push("/login/student");
        return;
      }
      var that = this;
      this.$axios.$post("http://www.jzcqedu.com:8080/f/common/addZan?type=1&id="+this.$route.params.id)
      .then(function (response) {
        if(!that.content.zan){
          that.content.zan = true;
          Notification.success({
            title:'提示',
            message:"已点赞"
          })
        }
        else{
          that.content.zan = false;
          Notification.success({
            title:'提示',
            message:"取消点赞"
          })
        }
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    collect(){
      if(!Cookies.get("token")){
        this.$router.push("/login");
        return;
      }
      var that = this;
      this.$axios.$post("/f/collectionCourse?rootCourseId="+this.$route.params.id)
      .then(function (response) {
        if(!that.content.collection){
          that.content.collection = true;
          Notification.success({
            title:'提示',
            message:"收藏成功"
          })
        }
        else{
          that.content.collection = false;
          Notification.success({
            title:'提示',
            message:"已取消收藏"
          })
        }
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    pageChange(index){
        this.pageNo = index;
        this.getCom();
    },
    huifu(index,type,item){
      console.log(index,type);
      if(type=="1"){
        this.id = item.id;
      }
      else{
        this.id = this.taoList[index].id;
      }
      this.message = "回复"+item.userName;
      var len = this.taoList.length;
      for(var i=0;i<len;i++){
        if(i==index){
        console.log(this.taoList[i])
          this.taoList[i].show = true;
        }
        else{
          this.taoList[i].show = false;
        }
      }
      var item = item;
      item.type = type;
      this.items = item;
    },
    test(item){
      this.$router.push("/mainAll/test/"+item.paperId);
    },
    handleSelect1(key, keyPath) {

    },
    handleSelect2(key, keyPath) {

    },
    goPage(item,url){
        this.$router.push(url);
    },
    goContent(item){
      if(item.privateId!=this.$route.params.id){
        this.loading = true;
      }

      setTimeout(()=>{
        this.$router.push("/dbcourse_content/"+item.privateId)
      },500)

    },
    handleClick(tab, event) {
        console.log(tab, event);
    },
    comment(item,index,type){
    console.log(item,index,type);
      if(!Cookies.get("token")){
        this.$router.push("/login");
        return;
      }
      if(type){
        if(this.textarea1==""){
          Notification.warning({
            title:'提示',
            message:"请输入评论内容"
          })
          return;
        }
        if(item.type=="1"){
          var data = {
            content:this.textarea1,
            id:this.$route.params.id,
            type:"1",
            parentId:item.id
          }
        }
        else{
          var data = {
            content:this.textarea1,
            id:this.$route.params.id,
            courseType:this.content.courseType,
            parentId:this.id
          }
        }

      }
      else{
        if(this.textarea==""){
          Notification.warning({
            title:'提示',
            message:"请输入评论内容"
          })
          return;
        }
        var data = {
          content:this.textarea,
          id:this.$route.params.id,
          courseType:this.content.courseType,
          parentId:"0"
        }
      }
      var that = this;
      this.$axios.$post("/f/addCourseContent?rootCourseId="+data.id+"&content="+data.content+"&courseType="+this.content.courseType+"&parentId="+data.parentId)
      .then(function (response) {
        Message.success({
          title:'提示',
          message:"已提交"
        })
        if(that.pageNo==1){
          that.getcomment();
        }
        if(type){
          that.textarea1 = "";
          if(index || index==0){
            var obj = {};
            obj.userName = Cookies.get("mobile");
            obj.businessName = "";
            obj.content = data.content;
            obj.createDate = response.data.createDate;
            that.taoList[index].educationContentList.unshift(obj);
            var len1 = that.taoList[index].educationContentList.length;
            that.taoList[index].educationContentList[len1-1].addClass="no-border";
          }
        }
        else{
          that.textarea = "";
        }

      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    getcomment(){
      var that = this;
      this.$axios.$get("/f/pageCourseContent?rootCourseId="+this.$route.params.id+"&pageNo="+this.pageNo+"&pageSize=10"+"&courseType="+this.content.courseType)
      .then(function (response) {
        console.log(response,222)
        var data = response.data;
        that.total = response.count;
        var len = data.length;
        if(len!=0){
          for(var i=0;i<len;i++){
            data[i].show = false;
            if(data[i].childList!=""&&data[i].childList.length!=0){
              var len1 = data[i].childList.length;
              data[i].childList[len1-1].addClass="no-border";
            }
          }
        }

        that.taoList = data;
        console.log(that.taoList,333)
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    addCenter(){
      if(!Cookies.get("type")){
        return;
      }
      this.$axios.$post("http://seed.ckwashington.com/admin/mini/video/addCourseStudyRecord?courseId="+this.$route.params.id+"&type=1")
      .then(function (response) {
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    getRecom(){
      var that = this;
      this.$axios.$post("http://seed.ckwashington.com/admin/mini/video/queryCourseRecList?type=1")
      .then(function (response) {
        var data = response.data.educationVideos;
        var len = data.length;
        var arr = [];
        if(len!=0){
          if(len>=5){
            for(var i=0;i<5;i++){
              data[i].photo = "http://seed.ckwashington.com"+data[i].photo;
              if(data[i].score==""){
                data[i].score = null;
              }
              else{
                data[i].score = Number(data[i].score)
              }
              arr.push(data[i]);
            }
          }
          else{
            for(var i=0;i<len;i++){
              data[i].photo = "http://seed.ckwashington.com"+data[i].photo;
              if(data[i].score==""){
                data[i].score = null;
              }
              else{
                data[i].score = Number(data[i].score)
              }
              arr.push(data[i]);
            }
          }
        }
        that.courseList = arr;
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    addCollect(item){
      var that = this;
      this.$axios.$post("http://seed.ckwashington.com/admin/mini/video/addCollection?courseId="+item.id+"&type=1")
      .then(function (response) {
        console.log(response);
        Notification.success({
          title:'提示',
          message:"已提交"
        })
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    getCom(){
      var that = this;
      this.$axios.$post("http://www.jzcqedu.com:8080/f/common/getContent?type=1"+"&id="+this.$route.params.id+"&pageNo="+this.pageNo+"&pageSize="+this.pageSize)
      .then(function (response) {
        let list = response.data;
        list.forEach((item,i)=>{
          item.show = false;
          item.userPhoto = "http://www.jzcqedu.com:8080"+item.userPhoto
        })
        that.taoList = list;
        that.total = response.count;
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    formatSeconds(value) {
  　　let result = parseInt(value)
  　　let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600)
  　　let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60))
  　　let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60))
  　　result = `${h}:${m}:${s}`
  　　return result
    },
    getData(){
      var that = this;
      this.loading = true;
      this.$axios.$post("/f/course?id="+this.$route.params.id)
      .then(function (response) {
        that.loading = false;
        that.start = true;
        let data = Object.assign(response.data.course,response.data.course.courseInfo,response.data);
        console.log(data,666)

        if(data.courseType=='1'){
          that.path = '/dbcourse';
          that.menuName = '点播课程';
        }
        else if(data.courseType=='3'){
          that.path = '/online';
          that.menuName = '直播课程';
        }
        else if(data.courseType=='4'){
          that.path = '/face_course';
          that.menuName = '面授课程';
        }

        if(Cookies.get("token")){
          let countObj = response.data.userStudyHoursMap;
          countObj.jindu = Math.ceil((countObj.studyCount/countObj.detailsCount)*100)
          that.countObj = countObj;
        }

        if(Cookies.get("token")){
          data.show = true;
        }
        // let data = response.data.educationVideo;
        // that.vip = response.data.vip;
        // data.photo = "http://www.jzcqedu.com:8080"+data.photo;

        // if(data.score==""){
        //   data.score=0
        // }
        // else{
        //   data.score = Number(data.score)
        // }
        // data.buy = response.data.buy;
        // data.coll = response.data.coll;
        // data.zan = response.data.zan;
        if(Number(data.presentPrice)==0){
          data.isTree = true;
        }
        if(data.courseType=="1"){
          that.label = "课程目录"
        }
        else if(data.courseType=="4"){
          that.label = "课程报名"
        }
        that.content = data;
        console.log(that.content,666)
        that.getcomment();
        that.getList();
        // that.content = data;

        let hot = response.data.courseDbRecDTOList;
        if(hot.length!=0){
          let arr = [];
          hot.forEach((item,i)=>{
            if(i<4){
              item = Object.assign(item,item.courseInfo);
              arr.push(item)
            }

          });
          that.courseList = arr;
        }


        let doc = data.educationDocList;
        if(doc.length!=0){
          let arr1 = [];
          doc.forEach((item,i)=>{
            //item.files = "http://www.jzcqedu.com:8080"+item.files;
            arr1.push(item);
          });
          that.muluList3 = arr1;
        }


        let detail = data.educationCourseDbDetailsList;
        let b = [];
        // if(detail.educationPaperList.length!=0){
        //   detail.educationPaperList.forEach(())
        // }
        if(detail){
          if(detail.length!=0){
            let arr2 = [];
            let arr5 = [];
            detail.forEach((item,i)=>{
              if(item.educationPaperList.length!=0){
                b.push(item.educationPaperList[0])
              }
              item = Object.assign(item,item.educationVideo)
              item.study = 0;
              item.timeTesx = that.formatSeconds(item.videoTime)
              if(that.login){
                let a = item.userStudyTime;
                if(a>=item.videoTime){
                  a = item.videoTime
                }
                item.study = Math.ceil((a/item.videoTime)*100);
                if(item.educationPaperList.length!=0){
                  item.testObj = item.educationPaperList[0];
                  item.testTitle = item.testObj.title;
                }
              }
              if(item.detailType=="1"){
                arr5.push(item);
              }
              arr2.push(item);
            });
            that.videoList = arr5;
            that.muluList1 = arr2;
            let len = arr2.length;
            if(that.muluList1[len-1].studyFlag){
              that.isTest = true;
            }
            else{
              that.isTest = false;
            }
            console.log(that.countObj,33)
            if(that.countObj.studyCount<arr5.length){
              that.nextTitle = arr5[that.countObj.studyCount].title;
            }
            // if(that.countObj.studyCount<detail.length){
            //   if(that.muluList1[that.countObj.studyCount].detailType=='1'){
            //     that.nextTitle = that.muluList1[that.countObj.studyCount].title;
            //   }
            //   else{
            //     that.nextTitle = that.muluList1[that.countObj.studyCount].testTitle;
            //   }

            // }
            if(that.countObj.studyCount==0){
              that.text = "开始学习"
            }
            else{
              that.text = "继续学习"
            }
          }
          that.testList = b;
        }




      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .movieContent-main{
    width:100%;
    background:#f0f0f2;
    .study-pagination{
      width:100%;
    }
    .el-timeline-item__wrapper{
      top:-8px;
    }
    .movieAll-1{
      width:100% !important;
      margin:0 auto;
      .back{
        cursor: pointer;
        width: 29px;
        height: 29px;
        margin:10px 35px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .course-content1{
        width:100%;
        margin-top:35px;
        margin-bottom:100px;
        position:relative;
        float:left;
        .content-right{
          float:left;
          width:280px;
          box-sizing:border-box;
          border:1px solid #0076ca;
          .hot-all{
            width:250px;
            margin:0 auto;
          }
          .hot-item{
            width:250px;
            margin-bottom:15px;
            cursor:pointer;
            float:left;
            box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
            img{
              width:250px;
              height:190px;
              display:block;
            }
            .name{
              width: 100%;
              display: block;
              line-height: 25px;
              margin-top: 10px;
              height: 25px;
              font-size: 18px;
              color: #222222;
              text-align: left;
              padding-left: 10px;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
            }
            .price{
              width: 100%;
              display: block;
              line-height: 25px;
              margin-top: 5px;
              height: 25px;
              font-size: 22px;
              color: #ef5924;
              text-align: left;
              margin-bottom:5px;
              padding-left: 10px;
              font-weight:500;
            }
          }
          .title{
            height:50px;
            line-height:50px;
            text-align:center;
            font-size:16px;
            color:#ffffff;
            background:#0076ca;
            margin-bottom:15px;
          }
        }
        .content-left{
          width:100% !important;
          float:left;
          margin-right:20px;
          .course-text{
            width:100%;
            background:#ffffff;
            padding:30px;
            box-sizing:border-box;
            font-size: 16px;
            color: #444444;
            img{
              max-width:100%;
            }
          }
          .el-tabs__content{
            .taolun{
              width:100%;
              border-radius:10px;
              padding:0 40px;
              padding-top:20px;
              padding-bottom:40px;
              background:#ffffff;
              .taolun-content{
                width:100%;
                padding:0 35px;
                .taolun-item{
                  width:100%;
                  margin-bottom:15px;
                  border-top: 1px dashed #d2d2d2;
                  text-align:left;
                  .man-img{
                    float:left;
                    width:40px;
                    height:40px;
                    border-radius:50%;
                    display:block;
                    margin-right:10px;
                    margin-top:10px;
                  }
                  .name{
                    width:calc(100% - 50px);
                    display:block;
                    line-height:40px;
                    margin-top:10px;
                    font-size:18px;
                    color:#222222;
                    float:left;
                    font-weight:600;
                  }
                  .content{
                    width:100%;
                    display:block;
                    line-height:25px;
                    margin-top:6px;
                    font-size:16px;
                    color:#222222;
                    float:left;
                  }
                  .huifuList{
                    width:100%;
                    margin-top:15px;
                    background:#f7f7f7;
                    border:1px solid #d2d2d2;
                    border-radius:2px;
                    padding:10px 15px;
                    float:left;
                    .no-border{
                      border:0 !important;
                      margin-bottom:0  !important;
                    }
                    .huifu-item{
                      width:100%;
                      border-bottom:1px dashed #d2d2d2;
                      margin-bottom:12px;
                      .content1{
                        line-height: 25px;
                        font-size: 16px;
                        color: #888888;
                      }
                      .huifu-bottom{
                        width:100%;
                        height:25px;
                        margin-bottom:5px;
                        margin-top:5px;
                        .huifu{
                          float:right;
                          height:100%;
                          .text{
                            line-height:25px;
                            font-size:14px;
                            color:#888888;
                            margin-right:7px;
                            float:left;
                            cursor:pointer;
                          }
                          img{
                            width:24px;
                            height:15px;
                            display:block;
                            cursor:pointer;
                            margin-top:6px;
                            float:left;
                          }
                        }
                        .time1{
                          line-height:25px;
                          font-size:16px;
                          color:#888888;
                        }
                      }
                    }
                    .huifu-item:last-child{
                      border-bottom:0
                    }
                  }
                  .text-main1{
                      width:100%;
                      margin-top:15px;
                      position:relative;
                      float:left;
                      .hui{
                        color:#888888;
                        font-size:14px;
                        cursor:pointer;
                        position:absolute;
                        right:7px;
                        bottom:7px;
                      }
                      img{
                        width:21px;
                        height:21px;
                        display:block;
                        position:absolute;
                        right:7px;
                        bottom:7px;
                        cursor:pointer;
                      }
                      textarea{
                        resize:none;
                        height:60px;
                        line-height:20px;
                        padding:10px 15px;
                        background:#f7f7f7;
                        border:1px solid #d2d2d2;
                        border-radius:2px;
                        overflow:hidden;
                      }
                    }
                  .taolun-bottom{
                    width:100%;
                    margin-top:6px;
                    height:25px;
                    float:left;
                    .huifu{
                      float:right;
                      height:100%;
                      margin-right:15px;
                      .text{
                        line-height:25px;
                        font-size:14px;
                        color:#888888;
                        margin-right:7px;
                        float:left;
                        cursor:pointer;
                      }
                      img{
                        width:24px;
                        height:15px;
                        display:block;
                        cursor:pointer;
                        margin-top:6px;
                        float:left;
                      }
                    }
                    .time{
                      line-height:25px;
                      font-size:16px;
                      color:#888888;
                    }
                  }
                }
              }
              .text-main{
                width:100%;
                position:relative;
                margin-bottom:40px;
                margin-top:30px;
                .button{
                  width: 65px;
                  height: 32px;
                  text-align: center;
                  line-height: 32px;
                  color: #6198fd;
                  font-size: 15px;
                  background: #f6f6f6;
                  cursor: pointer;
                  position: absolute;
                  right: 20px;
                  top: -31px;
                  border: 1px solid #6198fd;
                  border-bottom: 0;
                }
                .submit-button{
                  width:100px;
                  height:30px;
                  line-height:30px;
                  text-align:center;
                  color:#ffffff;
                  font-size:14px;
                  border-radius:3px;
                  cursor:pointer;
                  background:#6198fd;
                  margin:20px 0 ;
                  float:right;
                }
                .top-textarea{
                  textarea{
                    resize:none;
                    height:140px;
                    line-height:20px;
                    padding:15px 20px;
                    background:#f6f6f6;
                    border:1px solid #6198fd;
                    border-radius:4px;
                    overflow:hidden;

                  }
                  textarea::-webkit-input-placeholder{
                    color:#a0a0a0;
                    font-size:16px;
                    font-weight:600;
                  }
                }
              }

            }
            .ping-main{
              width:100%;

              padding:0 40px;
              padding-top:20px;
              display:flex;
              flex-wrap:wrap;
              justify-content:center;
              background:#fff;
              .pingList{
                width:100%;
                .pingList-item{
                  width:100%;
                  margin-bottom:20px;
                  border-bottom: 1px dashed #d2d2d2;
                  float:left;
                  padding-bottom:10px;
                  img{
                    width:50px;
                    height:50px;
                    display:block;
                    margin-right:15px;
                    float:left;
                    border-radius:50%;
                  }
                  .ping-right{
                    width:calc(100% - 65px);
                    float:right;
                    .man{
                      line-height:40px;
                      float:left;
                      font-size:16px;
                      color:#000000;
                    }
                    .time{
                      line-height:40px;
                      float:right;
                      font-size:14px;
                      color:#888888;
                    }
                    .content{
                      width:100%;
                      float:left;
                      margin:0px 0 15px 0;
                      line-height:25px;
                      font-size:16px;
                      text-align:left;
                      color:#000000;
                    }
                  }
                }
              }
              .text-main{
                width:100%;
                position:relative;
                margin-bottom:40px;
                .button{
                  width:65px;
                  height:32px;
                  text-align:center;
                  line-height:32px;
                  color:#ffffff;
                  font-size:15px;
                  background:#1676cc;
                  cursor:pointer;
                  position:absolute;
                  right:10px;
                  bottom:10px;
                }
                .top-textarea{
                  textarea{
                    resize:none;
                    height:140px;
                    line-height:20px;
                    padding:15px 20px;
                    background:#f6f6f6;
                    border:2px solid #1676cc;
                    border-radius:8px;
                    overflow:hidden;
                  }
                  textarea::-webkit-input-placeholder{
                    color:#a0a0a0;
                    font-size:16px;
                    font-weight:600;
                  }
                }
              }
              .ping{
                  height:30px;
                  margin:0 auto;
                  position:relative;
                  margin-bottom:40px;
                  .title1{
                      color:#1676cc;
                      float:left;
                      line-height:30px;
                      font-size:16px;
                  }
                  .rate-main{
                      float:left;
                      height:30px;
                      line-height:28px;
                      margin-right:45px;
                      .el-rate__icon,.el-rate__decimal{
                          line-height:30px;
                          font-size:22px;
                          margin-right:4px;
                      }
                      .el-rate__text{
                          position:relative;
                          top:-2px;
                      }
                  }
                  .teacher{
                      float:left;
                      line-height:30px;
                      color:#888888;
                      font-size:16px;
                  }
              }
            }
            .sign{
              width:100%;
              margin-top:0px;
              padding:0 10px;
              background:#ffffff;
              position:relative;
              float:left;
              .baoming-content{
                margin:0 auto;
                width:450px !important;
                margin-bottom:40px;

                .baoming-button{
                  width:100%;
                  height:60px;
                  cursor:pointer;
                  border-radius:30px;
                  line-height:60px;
                  text-align:center;
                  margin-bottom:20px;
                  font-size:18px;
                  color:#fff;
                  background:#0076ca;
                  box-shadow: 0 1px 12px #0076ca;
                  margin-top:30px;
                }
                .baoming-input{
                  width:100%;
                  height:60px;
                  border:1px solid #1676cc;
                  margin-bottom:30px;
                  .sex-select{
                    width:calc(100% - 110px) !important;
                    height:100%;
                    float:left;
                    input{
                      border:0;
                      height:58px;
                      line-height:58px;
                      font-size:18px;
                      text-align:center;
                    }
                  }
                  .text-input{
                    width:calc(100% - 110px);
                    height:100%;
                    float:left;
                    input{
                      border:0;
                      height:58px;
                      line-height:58px;
                      font-size:18px;
                    }
                  }
                  .name2{
                    width:110px;
                    height:58px;
                    line-height:58px;
                    text-align:center;
                    color:#fff;
                    font-size:18px;
                    background:#1676cc;
                    float:left;
                    display:block;
                  }
                }
                .title{
                  margin-top:40px;
                  margin-bottom:30px;
                  width:100%;
                  height:60px;
                  line-height:60px;
                  border:1px solid #1676cc;
                  text-align:center;
                  font-size:20px;
                  color:#1676cc;
                }
                .title-img{
                  width:166px;
                  height:42px;
                  display:block;
                }
              }
              .tishi{
                height:20px;
                line-height:20px;
                position:absolute;
                right:10px;
                top:0px;
                img{
                  width:20px;
                  height:20px;
                  display:block;
                  float:left;
                  margin-right:5px;
                }
                .name{
                  line-height:20px;
                  float:left;
                  font-size:16px;
                  color:#1676cc;
                  font-weight: 600;
                }
              }
            }
            .catalog{
            width:100%;
            box-sizing:border-box;
            padding:20px 0px;
            background:#ffffff;
            margin-top:20px;
            .test-item{
                width:100%;
                display:flex;
                align-items:center;
                height:60px;
                background:#fafafa;
                border-top:1px solid #f3eeee;
                box-sizing:border-box;
                padding: 0 30px;
                position:relative;
                .text{
                    font-size:15px;
                    color:#444444;
                    margin-right:15px;
                }
                .iconfont{
                    font-size:24px;
                    color:#2478d2;
                    margin-right:15px;
                }
                .name1{
                    font-size:14px;
                    color:#888888;
                }
                .start{
                    width:90px;
                    height:40px;
                    border-radius:5px;
                    border:1px solid #ccc;
                    color:#666666;
                    text-align:center;
                    line-height:38px;
                    position:absolute;
                    right:30px;
                    font-size:14px;
                    top:10px;
                    cursor:pointer;
                }
                .noTest{
                  background:#a5a4a4 !important;
                  pointer-events: none;
                  color:#fff !important;
                  cursor: default !important;
                }
            }
            .course-item{
                width:100%;
                box-sizing:border-box;

                .line-main{
                    width:100%;
                    background:#ffffff;
                    padding:0 30px;
                    padding-top:30px;
                    box-sizing:border-box;
                    .test-item{
                width:100%;
                display:flex;
                align-items:center;
                height:60px;
                background:#fafafa;
                border-top:1px solid #f3eeee;
                box-sizing:border-box;
                padding: 0 30px;
                position:relative;
                .text{
                    font-size:15px;
                    color:#444444;
                    margin-right:15px;
                }
                .iconfont{
                    font-size:24px;
                    color:#2478d2;
                    margin-right:15px;
                }
                .name1{
                    font-size:14px;
                    color:#888888;
                }
                .start{
                    width:90px;
                    height:40px;
                    border-radius:5px;
                    border:1px solid #ccc;
                    color:#666666;
                    text-align:center;
                    line-height:38px;
                    position:absolute;
                    right:30px;
                    top:10px;
                    cursor:pointer;
                }
            }
                    .el-timeline-item__content{
                        position:relative;
                        height:30px;
                    }
                    .name{
                        font-size:14px;
                        color:#777777;
                        margin-right:20px;
                        height:30px;
                        line-height:30px;
                        display:block;
                        float:left;
                    }
                    .right{
                    height:30px;
                    float:left;
                    margin-left:30px;
                    width:300px;
                    .name1{
                      line-height:30px;
                      font-size:15px;
                      color:#444444;
                      float:left;
                      width:80px;
                    }
                    .el-progress{
                      width:calc(100% - 80px);
                      float:left;
                      line-height:20px;
                      margin-top:5px;
                    }
                  }
                    .main-name{
                        font-size:14px;
                        color:#444444;
                        display:block;
                        width:250px;
                        overflow: hidden;
                        height:30px;
                        line-height:30px;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                        float:left;
                    }
                    .right-box{
                        position:absolute;
                        right:0;
                        top:50%;
                        transform:translateY(-50%);
                        height:30px;
                        .bofang{
                    width:80px;
                    height:30px;
                    float:right;
                    line-height:30px;
                    border-radius:5px;
                    text-align:center;
                    color:#ffffff;
                    font-size:14px;
                    background:#0076ca;
                    position:relative;
                    cursor:pointer;
                    a{
                      display:block;
                      width:100%;
                      height:100%;
                      text-align:center;
                      line-height:30px;
                      color:#ffffff;
                      text-decoration:none;
                    }
                  }
                        .noClick{
                          background:#a5a4a4 !important;
                          cursor: not-allowed;
                          pointer-events:none
                        }
                        .time{
                            color:#666666;
                            font-size:14px;
                            line-height:30px;
                            margin-right:20px;
                            float:left;

                        }
                        .time:before{
                            margin-right:10px;
                            font-size:20px;
                            color:#888888;
                            line-height:30px;
                            float: left;
                        }
                        .see{
                            width:70px;
                            height:30px;
                            line-height:30px;
                            text-align:center;
                            font-size:14px;
                            color:#fff;
                            background:#0076ca;
                            border-radius:4px;
                            cursor:pointer;
                        }
                    }
                }
                .top{
                    width:100%;
                    height:60px;
                    display:flex;
                    align-items:center;
                    background:#fafafa;
                    box-sizing:border-box;
                    padding:0 30px;
                    .text{
                        font-size:14px;
                        color:#888888;
                        margin-right:30px;
                    }
                    .index{
                        display:block;
                        width:25px;
                        height:25px;
                        line-height:23px;
                        text-align:center;
                        border-radius:50%;
                        color:#888888;
                        font-size:14px;
                        border:1px solid #888888;
                        margin-right:30px;
                    }
                    .name{
                        font-size:14px;
                        color:#888888;
                    }
                }
            }
            .mu-title{
                width:100%;
                padding:0 30px;
                height:40px;
                line-height:40px;
                border-bottom:1px solid #f3eeee;
                font-size:18px;
                color:#666666;

            }
        }
            .pre-box{
            width:100%;
            height:100px;
            background:#fff;
            display:flex;
            align-items:center;
            padding:0 30px;
            box-sizing:border-box;
            .pre-main{
                width:100%;
                .pre-bottom{
                    width:100%;
                    height:35px;
                    display:flex;
                    align-items:center;
                    justify-content:space-between;
                    .text,.next{
                        font-size:14px;
                        color:#888888;
                    }
                    .next{

                    }

                }
                .pre-top{
                    width:100%;
                    height:35px;
                    display:flex;
                    align-items:center;
                    justify-content:space-between;
                    .study{
                        width:100px;
                        height:35px;
                        line-height:35px;
                        text-align:center;
                        font-size:16px;
                        color:#fff;
                        background:#0076ca;
                        cursor:pointer;
                    }
                    .pre-jin{
                        width:calc(100% - 180px);
                    }
                }
            }
        }
            .mulumain{
              width:100%;

              margin-top:0;
              float: left;
              .mulu-item{
                width: calc(100% - 10px);
                margin: 0 5px;
                height: 60px;
                box-shadow: 0 1px 8px 0 rgba(210, 210, 210, 0.35);
                border-radius:5px;
                margin-bottom:25px;
                position:relative;
                background:#ffffff;
                .progress-top{
                  width:100%;
                  height:20px;
                  margin-top:20px;
                  float:left;

                  .top-title{
                    line-height:20px;
                    padding-left:25px;
                    font-size:18px;
                    color:#555555;
                    float:left;
                    display:block;
                    height:20px;
                    width:500px;
                    margin-right:30px;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                  }
                  .right{
                    height:20px;
                    float:left;
                    width:300px;
                    .name1{
                      line-height:20px;
                      font-size:15px;
                      color:#444444;
                      float:left;
                      width:80px;
                    }
                    .el-progress{
                      width:calc(100% - 80px);
                      float:left;
                      line-height:20px;
                    }
                  }

                }
                .text{
                  width:100%;
                  height:20px;
                  line-height:20px;
                  box-sizing:border-box;
                  padding-left:25px;
                  margin-top:20px;
                  font-size:16px;
                  float:left;
                  display:block;
                }
                .text2{

                  height:20px;
                  line-height:20px;
                  box-sizing:border-box;
                  padding-left:25px;
                  margin-top:20px;
                  font-size:16px;
                  float:left;
                  display:block;
                }
                .bofang{
                    width:80px;
                    height:30px;
                    float:right;
                    line-height:30px;
                    border-radius:5px;
                    text-align:center;
                    color:#ffffff;
                    font-size:14px;
                    background:#0076ca;
                    margin-right:30px;
                    position:relative;
                    top:-4px;
                    cursor:pointer;
                    a{
                      display:block;
                      width:100%;
                      height:100%;
                      text-align:center;
                      line-height:30px;
                      color:#ffffff;
                      text-decoration:none;
                    }
                  }
                .ceshi{
                  background:#1676cc;
                }
                .dian{
                  width:4px;
                  height:4px;
                  margin-left:15px;
                  margin-top:28px;
                  margin-right:15px;
                  display:block;
                  float:left;
                  background:#1676cc;
                }
                .name{
                  line-height:60px;
                  float:left;
                  color:#555555;
                  font-size:16px;
                  padding-left:25px;
                }
                .name2{
                  line-height:60px;
                  float:left;
                  color:#555555;
                  font-size:16px;
                  padding-left:25px;
                }
                .man{
                  position: absolute;
                  right: 150px;
                  top: 55px;
                  line-height: 30px;
                  font-size: 14px;
                  display:block;
                  color: #ff541e;
                  display:block;
                  .text1{
                    font-size:14px;
                  }
                  .iconwodeicon:before{
                    margin-left:5px;
                  }
                }
                .iconbofang2{
                  font-size:22px;
                  color:#aba4a4;
                }
              }
            }
          }
          .el-tabs__nav-wrap::after{
            display:none;
          }
          .el-tabs__nav-wrap{
            overflow:unset;
            .el-tabs__nav-scroll{
              overflow:unset;
            }
          }
          .el-tabs__item.is-active{
              padding: 0 15px;
              color: #fff;
              font-size: 16px;
              color:#0076ca;
              position:relative;
          }

          .el-tabs__item.is-active:after{
            width: 80%;
            height: 3px;
            content: '';
            background: #0076ca;
            position: absolute;
            right: 10%;
            bottom: 0;
          }
          .el-tabs__item{
            height:58px;
            line-height:58px;
            padding: 0 15px;
            font-size: 16px;
            margin-right:30px;
            color: #444444;
          }
          .el-tabs__item:hover{
            color: #444444;
          }
          .el-tabs__header{
            height:100px;
            background:#ffffff;
            padding:0 30px;
            box-shadow: 0 10px 12px rgba(226,226,226,0.5);
          }
          .el-tabs__active-bar{
            display:none;
          }
        }
        .content-right{

        }
      }
      .courser-top{
        width:100%;
        height:390px;
        background:#ffffff;
        padding:35px;
        box-sizing:border-box;
        .course-main{
          width:560px;
          height:100%;
          float:left;
          margin-right:40px;
        }
        .course-right{
          width:calc(100% - 600px);
          height:100%;
          float:left;
          position:relative;
          .text{
            float:left;
            line-height:45px;
            float:left;
            margin-top:25px;
            color:#0076ca;
            font-size:16px;
          }
          .title{
            text-align:left;
            margin-top:15px;
            line-height:30px;
            font-size:24px;
            color:#222222;
            float:left;
            margin-right:12px;
          }
          .vip-icon{
            width:55px;
            height:20px;
            margin-top:35px;
            display:block;
            float:left;
          }
          .xin{
            position: absolute;
            height: 25px;
            right: -10px;
            top: 0px;
            .number{
              line-height:25px;
              font-size:14px;
              color:#888888;
              float:left;
              margin-right:10px;
              cursor:pointer;
            }
            .iconzan1{
              color:#d83c3c;
            }
            .iconxin{
              width:25px;
              height:25px;
              float:left;
              line-height:25px;
              display:block;
              text-align:center;
              color:#888888;
              font-size:30px;
              cursor:pointer;
            }
            .iconxin1{
              color:#d83c3c;
            }
          }
          .mai{
            float:left;
            width:150px;
            cursor:pointer;
            height:45px;
            background-size:100% 100%;
            line-height:45px;
            text-align:center;
            font-size:16px;
            color:#fff;
            background:#0076ca;
            margin-top:25px;
            margin-right:15px;
          }
          .see{
            float:left;
            width:150px;
            cursor:pointer;
            height:45px;
            background-size:100% 100%;
            line-height:45px;
            text-align:center;
            font-size:16px;
            color:#fff;
            background:#f54337;
            margin-top:25px;
          }
          .price{
            width:100%;
            display:block;
            text-align:left;
            margin-top:10px;
            line-height:30px;
            height:30px;
            color:#0076ca;
            font-size:28px;
            float:left;
            font-weight:600;
            .old-price{
              margin-left:10px;
              font-size:18px;
              font-weight:500;
              color:#666666;
              text-decoration:line-through;
            }
            .keshi{
              margin-left:10px;
              font-size:18px;
              font-weight:500;
              color:#666666;
            }
          }
          .ping{
              width:100%;
              height:30px;
              margin-top:10px;
              position:relative;
              float:left;
              .title1{
                  color:#888888;
                  float:left;
                  line-height:30px;
                  font-size:16px;
              }
              .rate-main{
                  float:left;
                  height:30px;
                  line-height:28px;
                  margin-right:10px;
                  .el-rate__icon,.el-rate__decimal{
                      line-height:30px;
                      font-size:22px;
                      margin-right:4px;
                  }
                  .el-rate__text{
                      position:relative;
                      top:-2px;
                  }
              }
              .teacher1{
                  float:left;
                  line-height:30px;
                  color:#888888;
                  font-size:16px;
              }
          }
          .content{
            width:100%;
            margin-top:20px;
            height:80px;
            line-height:20px;
            font-size:16px;
            color:#666666;
            float:left;
            text-align:left;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
          }
          .sou{
            padding:0;
            width:40px;
            height:40px;
            line-height:30px;
            color:#444444;
            position:absolute;
            background:rgba(0,0,0,0);
            top:10px;
            font-size:16px;
            right:0px;
            border:1px solid #e8e8e8;
          }
        }
      }
    }
    .classroom-main{
        width:1250px;
        margin:0 auto;
        .el-breadcrumb{
            margin:30px 0;
            font-size:15px;
            padding-left:10px;
        }
    }
  }

</style>
